<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-flex
        :style="{ height: '130px', lineHeight: 1, color: '#ffffff', position: 'relative' }"
        vertical
        justify="center"
        align="center"
      >
        <a-flex :style="{ marginBottom: '12px' }" align="center">
          <span :style="{ fontSize: '29px', padding: '0 6px' }">{{ myWorkCoin }}</span>
          <span :style="{ fontSize: '16px' }">股</span>
        </a-flex>
        <span :style="{ fontSize: '13px', lineHeight: '18px' }">
          ≈{{ (myWorkCoin * valuation.today).toFixed(2) }}元
        </span>
        <a-button
          type="text"
          style="
            position: absolute;
            right: 16px;
            top: calc(50% - 8px);
            color: #ffffff;
            font-size: 16px;
            line-height: 16px;
            height: 16px;
            padding: 0;
          "
          @click="handleTurnBill"
        >
          工币明细
        </a-button>
      </a-flex>
      <a-flex class="module-wrapper valuation-trend-wrapper" vertical align="center">
        <span
          :style="{
            fontSize: '14px',
            fontWeight: 'bolder',
            lineHeight: '20px',
            marginBottom: '16px',
          }"
        >
          估值走势图
        </span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">
          随着工币价值不断提高，兑换工币所需金币数将逐渐增加
        </span>
        <a-flex
          :style="{ width: '100%', fontSize: '10px', lineHeight: '14px' }"
          justify="space-between"
        >
          <span>
            <span>今日价格：</span>
            <span :style="{ color: '#FD436A' }">1 洽股={{ valuation.today }}元</span>
          </span>
          <span>
            <span>令日涨幅：</span>
            <span :style="{ color: '#FD436A' }">
              {{ valuationIncrease > 0 ? '+' : '' }}{{ valuationIncrease }}%
            </span>
          </span>
        </a-flex>
        <ChartLine
          chartId="valuation-trend-chart"
          height="200px"
          :options="valuationTrendChartOptions"
          style="width: 100%"
        />
        <span :style="{ fontSize: '10px', color: '#979797', lineHeight: '14px' }">
          *数据仅展示最近7天
        </span>
      </a-flex>
      <a-flex class="module-wrapper equity-distribution-wrapper" vertical align="center">
        <span
          :style="{
            fontSize: '14px',
            fontWeight: 'bolder',
            lineHeight: '20px',
            marginBottom: '12px',
          }"
        >
          股权分布
        </span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">
          工币发行1000万，初始兑换定价为1元
        </span>
        <ChartPie
          chartId="equity-distribution-chart"
          height="135px"
          :options="equityDistributionChartOptions"
          style="width: 100%"
        />
      </a-flex>
      <a-flex class="module-wrapper work-coin-rights-wrapper" vertical align="center">
        <span
          :style="{
            fontSize: '14px',
            fontWeight: 'bolder',
            lineHeight: '20px',
            marginBottom: '12px',
          }"
        >
          工币权益
        </span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">
          工币市平台股份唯一确认积分，持有工币享有多种权益
        </span>
        <a-flex :style="{ width: '100%' }" justify="space-between">
          <a-flex
            v-for="(item, index) in workIconRights.listData"
            :key="index"
            :style="{ width: 100 / workIconRights.listData.length + '%' }"
            vertical
            align="center"
          >
            <img
              :src="item.icon"
              width="34px"
              height="34px"
              alt=""
              :style="{ marginBottom: '12px' }"
            />
            <span :style="{ fontSize: '12px', lineHeight: '20px' }">{{ item.label }}</span>
          </a-flex>
        </a-flex>
      </a-flex>
      <div :style="{ height: '10px' }"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import request, { AxiosWrapper } from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()

import IconPlatformDividend from '/@/assets/images/h5/icon-platform-dividend.png'
import IconRegularRepurchase from '/@/assets/images/h5/icon-regular-repurchase.png'
import IconEquityExchange from '/@/assets/images/h5/icon-equity-exchange.png'
import IconAppreciationRights from '/@/assets/images/h5/icon-appreciation-rights.png'
import IconRedPacketTransfer from '/@/assets/images/h5/icon-red-packet-transfer.png'

const myWorkCoin = ref(0)
const getMyCorkCoin = async () => {
  try {
    const res = await request.get('/hd/appUserShareMain/queryCurrentShare')
    myWorkCoin.value = res.result
  } catch (error) {}
}

const handleTurnBill = () => {
  const token = AxiosWrapper.getHashSearchParam('token')
  router.push(`/h5/workCoin/bill?token=${token}`)
}

const valuation = reactive({
  today: 0,
  yesterday: 0,
  trendData: [],
})
const valuationIncrease = computed(() => {
  const increase = valuation.today - valuation.yesterday
  return (
    increase &&
    (valuation.yesterday === 0
      ? (Math.abs(increase) / increase) * 100
      : parseInt((increase / valuation.yesterday) * 10000) / 100)
  )
})
const valuationTrendChartOptions = computed(() => {
  return {
    xAxis: {
      data: valuation.trendData.map((item) => item.day.slice(5)),
    },
    yAxis: {},
    label: {
      show: true,
      fontSize: 10,
      fontWeight: 'bold',
      color: '#3D3D3D',
    },
    series: {
      type: 'line',
      symbol: 'circle',
      color: '#FD436A',
      data: valuation.trendData.map((item) => item.v),
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#FD436A',
            },
            {
              offset: 1,
              color: '#FD436A00',
            },
          ],
        },
      },
    },
  }
})
const getValuationTrend = async () => {
  try {
    const res = await request.get('/hd/appUserShareMain/getShareTrend')
    valuation.trendData = res.result
    if (!res.result || res.result.length === 0) return
    valuation.today = res.result[res.result.length - 1].v
    if (res.result.length === 1) {
      valuation.yesterday = 0
    } else {
      valuation.yesterday = res.result[res.result.length - 2].v
    }
  } catch (error) {}
}

const equityDistributionData = ref([])
const equityDistributionChartOptions = computed(() => {
  const total = equityDistributionData.value.reduce((cur, item) => cur + item.value, 0) / 10
  const chartData = []
  const legendData = []
  equityDistributionData.value.forEach((item) => {
    const name = item.name + '(' + ((item.value / total) * 10).toFixed(0) + '%)'
    chartData.push({
      name,
      value: item.value,
      itemStyle: { color: item.color },
    })
    chartData.push({
      value: total / equityDistributionData.value.length,
      itemStyle: { color: '#ffffff00' },
    })
    legendData.push({ name })
  })
  return {
    legend: {
      left: '60%',
      top: 10,
      data: legendData,
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '100%'],
        center: ['30%', '50%'],
        data: [{ value: 1, itemStyle: { color: '#eeeeee' } }],
        label: { show: false },
      },
      {
        type: 'pie',
        clockwise: false,
        radius: ['60%', '90%'],
        center: ['30%', '50%'],
        data: chartData,
        label: { show: false },
      },
    ],
  }
})

onMounted(() => {
  getMyCorkCoin()
  getValuationTrend()
  setTimeout(() => {
    equityDistributionData.value = [
      { name: '用户持股', value: 9376, color: '#FD436A' },
      { name: '平台持股', value: 6226, color: '#EC7600' },
    ]
  }, 300)
})

const workIconRights = {
  listData: [
    {
      label: '平台分红',
      icon: IconPlatformDividend,
    },
    {
      label: '定期回购',
      icon: IconRegularRepurchase,
    },
    {
      label: '股权兑换',
      icon: IconEquityExchange,
    },
    {
      label: '增值权益',
      icon: IconAppreciationRights,
    },
    {
      label: '红包转账',
      icon: IconRedPacketTransfer,
    },
  ],
}
</script>

<style scoped lang="less">
.page-wrapper {
  height: 100%;
  overflow-y: auto;
}
.page-wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  min-height: 100%;
  background-image: url(/@/assets/images/h5/bg-workCoinMine.png);
  background-size: 100% auto;
  background-position: 0 -88px;
  background-repeat: no-repeat;
}
.module-wrapper {
  border-radius: 10px;
  margin: 0 12px 16px;
  background-color: #ffffff;
  padding: 16px 20px 10px;
  color: #000000;
}
.valuation-trend-wrapper {
  padding-bottom: 10px;
}
.equity-distribution-wrapper {
}
.work-coin-rights-wrapper {
}
</style>
